<!-- 支付前 订单详情  汇率 余额  -->
<template>
  <div class="pay-layout">

    <div class="pay-box">
      <p v-if="type==='new'" class="title webfont-Medium" style="padding-left: 14px;">{{ title }}</p>
      <ul class="pay-main">
        <li class="item total">
          <p class="lt webfont-Medium">{{ type==='new'?'总预算':'追加预算' }}</p>
          <p class="rt">
            <span>{{ unit==="RMB"?'￥':'$' }}{{ amount|$toFixed(2) }}</span>
          </p>
        </li>
        <li class="item ">
          <p class="lt webfont-Medium">服务费({{ payData.servicerate*100 }}%)</p>
          <p class="rt">
            {{ unit==="RMB"?'￥':'$' }}{{ payData.servicecharge|$toFixed(2) }}
          </p>
        </li>
        <li class="item ">
          <p class="lt webfont-Medium">预付税费({{ payData.expensesRate*100 }}%)</p>
          <p class="rt">
            {{ unit==="RMB"?'￥':'$' }}{{ payData.expensesBanlance|$toFixed(2) }}
          </p>
        </li>
        <li class="item need">
          <p class="lt webfont-Medium">应付金额</p>
          <div class="rt">
            <p class="num">
              <span>
                ￥{{ payData.rmbamount||needPayNum|$toFixed(2) }}
              </span>
              <span v-if="unit==='USD'">({{ unit==="RMB"?'￥':'$' }}{{payData.endamount|$toFixed(2)|| needPayUSD|$toFixed(2) }})</span>
            </p>
            <p v-if="unit==='USD'" class="rge">当前汇率:$1.00 = ￥{{ payData.exrate||'NaN' }}</p>
          </div>
        </li>

        <li :class="payData.ublance*100<payData.endamount*100?'item balance ht':'item balance'">
          <p class="lt webfont-Medium">余额抵扣</p>
          <p class="rt">
            <span>-{{ unit==="RMB"?'￥':'$' }}{{ payData.endamount||needPayNum|$toFixed(2) }}</span>
            <span style="font-size: 12px;line-height: 16px;color: #ACB6C2;" class="reg">当前可用余额:{{ unit==="RMB"?'￥':'$' }}{{ payData.ublance|$toFixed(2) }}</span>
            <span v-if="payData.ublance*100<payData.endamount*100" class="not-sec webfont-Regular">{{ notStr }}</span>
          </p>
        </li>

      </ul>
    </div>

  </div>
</template>
<script>
import {
  findAmountPayable // 查询用户余额,汇率，服务费率等

} from '@/api/create.js' //

export default {
  name: '',
  props: {
    type: {
      type: String,
      default: 'new'
    },

    // 标题名称
    title: {
      type: String,
      default: '确认支付信息'
    },
    // 币种
    unit: {
      type: String,
      default: function() {
        return this.$store.state.user.unit
      }
    },
    // 需要支付的金钱数量
    num: {
      type: Number
    }
  }, // ·������
  data() {
    return {
      amount: 1,
      payData: {}
    }
  },
  computed: {
    notStr() {
      /*
                            // const roles=['系列管理员','账号财务','系列只读']
                              游客：visitor:拥有所有权限及路由
                              系列管理员：manager:除了(创建广告系列+财务)外的所有权限+路由
                              账号财务：finance:除了公共页面之外 只能进入财务页面
                              账号只读：readOnly:除了公共页面之外，只能进入数据概览页面&&只有查询及导出功能
                      		系列只读：：campaignsReadOnly：同上
                            */
      const roleName = this.$store.state.user.userInfo.roleName
      if (['visitor', 'manager'].indexOf(roleName) === -1) {
        return '余额不足,请联系管理员充值'
      } else {
        return '余额不足,请充值后支付'
      }
    },

    // 服务费
    serviceNum() {
      if (this.payData.servicerate && this.amount) {
        const num = this.payData.servicerate * this.amount * 100 / 100
        return num.toFixed(2)
      } else {
        return 'NaN'
      }
    },

    // 需要付的金额=金额*汇率 +服务费
    needPayNum() {
      if (this.payData.servicerate && this.amount && this.payData.exrate) {
        const num = this.amount * 1 + this.payData.servicecharge
        return (Math.round(num * this.payData.exrate * 100)) / 100
      } else {
        return 'NaN'
      }
    },
    needPayUSD() {
      if (this.payData.servicerate && this.amount && this.payData.exrate) {
        const num = this.amount * 1 + (this.amount * this.payData.servicerate)
        return num
      } else {
        return 'NaN'
      }
    }

  },
  watch: {
    num: { // �����Ķ���
      deep: true, // ���ȼ�������Ϊ true
      immediate: true,
      handler: function(newV, oldV) {
        this.amount = newV
        if (newV * 100 >= 1) {
          this.findAmountPayable()
        }
      }
    }
  },
  // ������
  created() {},
  // ���غ�
  mounted() {

  },
  // ���ٺ�
  destroyed() {

  },

  // ����
  methods: {
    // 查询用户余额，汇率，服务费率等信息；
    async findAmountPayable() { // 查询用用户余额
      const res = await findAmountPayable({
        userId: this.$store.state.user.userInfo.userId,
        amount: this.amount,
        type: this.unit,
        teamId: this.$store.state.team.teamId
      })

      if (res.data.code === 20000) {
        this.payData = res.data.data
        this.$emit('findAmountRes', this.payData)
      } else {
        this.createFlag = false
        this.$message.closeAll()
        this.$message.error(res.data.message || '获取余额失败，请稍后重试')
      }

      this.$forceUpdate()
    }
  }
}
</script>

<style scoped lang="scss">
  .pay-layout {
    width: 100%;
    max-width: 480px;

    .pay-box {
      border: 1px solid #E5E5E5;
      width: 100%;

      .title {
        padding-left: 24px;
        height: 54px;
        line-height: 54px;
        font-size: 14px;
        border-bottom: 1px solid #E5E5E5;
      }

      ul {
        li {
          box-sizing: content-box;
          height: 46px;
          border-top: 1px solid #E5E5E5;
          display: flex;
          align-items: center;
          box-sizing: content-box;
          overflow: hidden;
		      &.total{border-top: none;}

          .lt {
            height: 46px;
            width: 144px;
            font-size: 14px;
            background: #F2F3F5;
            line-height: 46px;
            padding-left: 14px;
          }

          .rt {
            padding-right: 16px;
            font-size: 16px;
            font-family: "PingFangSC-Medium", PingFangSC, sans-serif !important;
            text-align: right;
            flex: 1;

          }

        }

        .need {

          .lt {
            height: 60px;
            line-height: 60px;
          }

          .rt {
            .num {
              font-size: 16px;
              line-height: 24px;
              padding-bottom: 4px;

            }

            .rge {
              font-size: 12px;
              line-height: 16px;
              color: #ACB6C2;
            }
          }
        }
      }
    }
  }

  .balance {
    overflow: hidden;
     height: 80px !important;
     .lt {
       height: 80px !important;
       line-height: 80px !important;
     }
    &.ht {
      .lt {
        height: 80px !important;
        line-height: 80px !important;
      }
    }

    .rt {
      span {
        display: block;
      }

      .reg {
        padding-top: 4px;
      }

      .not-sec {
        font-size: 12px;
        line-height: 12px;
        color: #E9716A;
        padding-top: 6px;

      }
    }
  }
</style>
